@import "normalize.scss";

@import "bootstrap.scss";

$color:#4668a5;

$hover_color:#41b883;


$font_color:#24282c;

*{
   user-select:none;
   user-drag:none;
}
/*
防止NanUI出现竖向滚动条
*/
body{
  //overflow-y: hidden;
}

.clear{
  clear: both;
}

.nong-scroll-container{
  display: none;
  position: fixed;
  z-index: 1000;
  width: 1rem;
  height:100%;
  background: white;
  top:3rem;
  right: 0;
  // opacity:0;
  // visibility: hidden;

  .scoll-bar{
    width: 0.8rem;
    background: #ccc;
    height: 15rem;
    display: block;
    position: absolute;
    top: 0;
    right: 0.1rem;
    border-radius: 5px;
  }
}


.nong-operate-layer{
  position: fixed;
  z-index: 1000;
  right: 0;
  top: 0;
  background: $color;
  height: 3rem;
  width: 9rem;

  .nong-close,.nong-mini,
  .nong-max{
    width: 2rem;
    height: 2rem;
    text-align: center;
    float: left;
    color: white;
    display: block;
    margin:0.5rem;
  }

  .nong-mini{
    background-image: url("../images/mini.png");
    background-size: cover;
  }

  .nong-max{
    background-image: url("../images/max.png");
    background-size: cover;
  }

  .nong-close{
    background-image: url("../images/close.png");
    background-size: cover;
  }


  &:hover{
    background: $hover_color;

    // .nong-close,.nong-mini,
    // .nong-max{
    //   background:$color;
    // }
  }

  @at-root{
    .animate{
      transition:  all 0.5s ease-in-out;
    }
  }
}

.nong-header-border{
  height: 3rem;
  background: $color;
  width: 100%;
  clear: both;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}


.nong-divide-3{
    width: 100%;
    height: 3rem;
    clear: both;
    display: block;
}

.nong-divide-5{
  width: 100%;
  height: 5rem;
  clear: both;
  display: block;
}

.nong-container{
  width: 100%;
  height: auto;
  border-bottom: 3rem solid $color;
  @at-root{
    .nong-header{
      width: 100%;
      height: 30rem;
      padding-top: 3rem;
      border-bottom: 10px solid $color;
      clear: both;
      margin-bottom: 3rem;
      // overflow: hidden;
    }

    .nong-header-item{
      width: 100%;
      height: 100%;
      //display: block;
      display: none;
      float: left;
      background-image:url("../images/nav1.jpg");
      background-position: center;
      background-size:cover;
      opacity: 0.3;
      filter: alpha(opacity=30);
    }

    .nong-item-active{
      display: block;
      opacity: 0.3;
      filter: alpha(opacity=30);
    }

    .nong-header-item-animated{
      opacity: 1;
    }

    .trans-animate{
      transition:  all 2s ease-in-out;
    }

  }

  @at-root{

    .nong-nav{
      width: 35%;
      box-sizing: border-box;;
      height: auto;
      float:left;
      border-right: 1px #e5e5e5 solid;
      padding:0 2rem;

      .nav-item{
        width: 100%;
        height: 5rem;
        display: block;
        line-height: 5rem;
        // background: $color;
        text-align: center;
        font-family: '微软雅黑';
        font-size: 2em;
        color:#333;
        // margin-bottom: 1rem;
        // border-bottom: 1px dotted #f5f5f5;
        cursor: pointer;
      }

      .nav-item-divide{
        margin-bottom: 0.5rem;
        border-top:1px dotted #f1f1f1;
        margin-top: 0.5rem;
        display: block;
        width: 100%;
        height: auto;
        clear: both;
      }

      .nav-item-active{
        display: block;
        background: $color;
        color: #fff;
      }

    }

  }

  @at-root{

    .nong-content{
      width: 65%;
      display: block;
      text-decoration: none;
      box-sizing: border-box;
      height: auto;
      height: auto;
      float: right;
      padding: 0rem 2rem;
      .nong-content-header{
        width: 100%;
        height: 5rem;
        border-bottom: 2px #f1f1f1 dotted;
        position: relative;
        .direction-icon{
          width: 3rem;
          height: 3rem;
          background: url('../images/arrow-r.png');
          background-size: cover;
          display: inline-block;
          margin:1rem;
          position: absolute;
          left: 0;
          top: 0;
        }

        .nong-main-title{
          font-size: 1.5em;
          color: #333;
          display: block;
          float: left;
          width: 100%;
          height: 5rem;
          line-height: 5rem;
          padding-left: 5rem;
          box-sizing: border-box;
          text-indent: 2em;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          padding-right: 2em;
        }

      }

      .nong-content-show{
        height: 20rem;
        width: 100%;
        clear: both;
        display: block;
        margin: 2rem 0;
        position:relative;
        .conent-show-layer{
          position: absolute;
          z-index: 10;
          width: 100%;
          left:0;
          bottom: 0;
          height: 4rem;
          background: rgba(0,0,0,0.3);
          color: #fff;
          line-height: 4rem;
          font-size: 1.1em;
          text-align: left;
          text-indent: 2em;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          box-sizing: border-box;
          padding-right: 2em;
        }

        .content-show-now{
          position: absolute;
          left: 0;
          top:0;
          z-index: 10;
          height: 5rem;
          padding: 0.3rem;
          width: 9rem;
          background: $color;
        }

        .show-date{
          display: inline-block;
          text-align: center;
          width: 100%;
          line-height: 2.6rem;
          height: 2.6rem;
          font-size: 1.8em;
          text-align: center;
          color: #fff;
        }

        .show-year-month{
          display: inline-block;
          text-align: center;
          width: 100%;
          margin-top: 0.1rem;
          line-height: 1.8rem;
          height: 1.8rem;
          font-size: 1.1em;
          text-align: center;
          color: #fff;
        }

      }


      .nong-content-item-tap{
        background: #f5f5f5;
      }

      .nong-content-item-divide{
          border-bottom:2px dotted #f5f5f5;
          margin:0.8rem 0;
          width: 100%;
          height: auto;
          display: block;
          clear: both;
      }


      .nong-content-item{
        width: 100%;
        height: 12rem;
        display: block;
        clear: both;
        position: relative;
        // border-bottom:2px dotted #f5f5f5;
        .nong-item-thumb{
          display: block;
          border-radius: 50%;
          width: 12*0.8rem;
          height: 80%;
          margin:1.2rem;
          float: left;
          position: absolute;
          left: 0;
          top:0;
          z-index: 10;
          background-size: cover;
        }

        .nong-item-main{
          float: left;
          box-sizing: border-box;
          position: relative;
          width: 100%;
          height: 12rem;
          float:left;
          display: block;
          padding: 1rem 0;
          padding-left: 12rem;

        }

        .nong-item-wrapper{
          height: 100%;
          width: 100%;
          .news-title{
            height:3rem;
            width: 100%;
            display:block;
            box-sizing:border-box;
            clear: both;
            position: relative;
            color: #333;
            padding-right: 10rem;
            text-indent: 2rem;
            font-size: 1.2em;
            line-height: 3rem;
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow: hidden;
          }

          .news-time{
            width:10rem;
            height: 3rem;
            line-height: 3rem;
            position: absolute;
            right: 0;
            top: 1rem;
            text-align: center;
            color: #ccc;
            font-size: 1em;
            font-family: '微软雅黑';
          }

          .news-content{
            // height: 7.5rem;
            width: 100%;
            text-indent: 2em;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            line-height: 1.5em;
            color: #a0a0a0;
          }


        }

      }


      //栽培技术展板
      .cultivation-nav-header{

        .cultivation-start{
          width: 100%;
          height: 10rem;
          clear: both;
          display: block;

          .start-item{
            width: 23.8%;
            height: 100%;
            margin-right:1.6%;
            float: left;
            background-image: url('../images/nav5.jpg');
            background-position:center;
            background-size: cover;
            display: block;
            border-radius: 5px;
          }


          .start-item:first-child{
            margin-left:0;
          }

          .start-item:last-child{
            margin-right:0;
          }

        }


      }

      .cultivation-current-nav{
        width: 100%;
        height: 15rem;
        clear: both;
        // margin-top: 3rem;
        margin: 3rem 0;
        border-radius: 3px;
        border: 1px solid #f1f1f1;
        box-shadow: 0 0 8px rgba(0,0,0,0.3);
        text-align: center;
         position: relative;
      }

      .cultivation-animate{
        transition: all 1s ease-in-out 0s;
      }

      .cultivation-nav-item{
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }

      .current-item-active{
        display: block;
      }

      .cultivation-position-animated{
        position: absolute;
        left: 2rem;
        opacity: 0.5;
        top:0;
      }

      .current-title{
        margin:10px;
        color: #24282c;
      }

      .current-desc-conent{
        padding:1rem;
        line-height: 1.5em;
        color:$font_color;
      }

      .current-desc{
        width:100%;
        height: auto;
        color:#a0a0a0;
        display: block;
      }

      .current-nav-border{
          border-bottom: 3px solid $color;
          width: 5rem;
          height: 1rem;
          display: inline-block;
      }

      .cultivation-item{
        width: 100%;
        height: 14rem;
        // background: red;
        margin-bottom: 3rem;
        clear: both;
        position: relative;
      }

      .cultivation-img{
        border: 1px #f1f1f1 solid;
        height: 100%;
        width: 24rem;
        box-sizing: border-box;
        float: left;
        position: absolute;
        left: 0;
        top: 0;
        background-size:cover;
      }

      .cultivation-item-title{
        height: 56.8%;
        width: 100%;
        padding-left: 26rem;
        // box-sizing: border-box;
        line-height: 56.8%;
      }

      .detail-subtitle{
        color: $font_color;
        height: auto;
        font-size: 1.3em;
        margin-top: 10px;
        line-height: 40px;
        height: 40px;
        padding-left: 15px;
      }

      .cultivation-item-inner{
        width: 100%;
        height: 100%;
        display: block;
        border-bottom: 1px dotted #f1f1f1;
      }

      .detail-title{
        color: $font_color;
      }

      .cultivation-item-desc{
        width: 100%;
        margin-top:2%;
        display: inline-block;
        box-sizing: border-box;
        padding-left: 26rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 1.1em;
        line-height: 1.5em;
        overflow: hidden;
        color: #24282c;
        text-indent: 2em;
      }


    }

  }





}
